<script>
import {reactive, ref} from "vue";

export default {
  name: "App",
  setup(props, context) {
    /*
      reactive()函数：返回一个对象的响应式代理(定义复杂的数据类型)
        响应式转换是“深层”的：它会影响到所有嵌套的属性。一个响应式对象也将深层地解包任何 ref 属性，同时保持响应性
        若要避免深层响应式转换，只想保留对这个对象顶层次访问的响应性，使用shallowReactive()作替代。
    */

    // 使用reactive()函数创建一个响应式对象
    const account = reactive({
      userName: "taopinqi",
      userPassword: "taopinqi103",
      registrationTime: {
        date: "2010",
      }
    })
    const changeAccount = () => {
      account.userName = "111"
      account.userPassword = "222"
      // reactive()是深层的响应式会影响到所有嵌套的属性
      account.registrationTime.date = "2023"
    }
    return {
      account,
      changeAccount
    }
  }
}
</script>
<template>
  <div class="App">
    <h1>注册时间：{{ account.registrationTime.date }}</h1>
    <h1>账号是：{{ account.userName }}</h1>
    <h1>密码是：{{ account.userPassword }}</h1>
    <button @click="changeAccount">修改</button>
  </div>
</template>

<style lang="less">

</style>
